iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 12
1
Modern Web

每日挖個坑,用坑填起耍廢聊天室!系列 第 12

十二號坑,將常用功能弄成Nuxt Plugin直接使用

  • 分享至 

  • xImage
  •  

上一篇我們設定好了socket連線,並且在首頁引入socket來收發事件,不過這樣做用了一陣子就會發現一件事情

就是要一直引入socket

就有點麻煩,更何況是聊天室一堆都有機會接收socket事件,所以這篇就是來解決這個問題~

設定client端的socket plugin

plugins資料夾下增加一支socket-io.js加入以下

import io from 'socket.io-client'
const socket = io()

export default (ctx, inject) => {
  inject('socket', socket)
  // inject('newName', 觸發事件) 使用上就會變成 this.$newName
}

加完之後必須到nuxt.config設定plugin,在裡面找到plugins的項目加上plugin檔案路徑

plugins: [{ src: '~/plugins/socket-io' }],

之後在任何vue裡都可以直接用this.$socket使用socket事件囉~(゚∀゚)(゚∀゚)(゚∀゚)

現在就可以把前一篇在首頁上加上的socket引入拔掉囉~


上一篇
十一號坑,Socket連起來!
下一篇
十三號坑,輸入訊息-v-model
系列文
每日挖個坑,用坑填起耍廢聊天室!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言